<template>
	<view>
			<view style="height: 40rpx;"></view>
			<view style="position: relative;width: 400rpx;margin-left: 20rpx;position: fixed;width: 100%;z-index: 1000;">
				<u-icon
				 @click="toBack()"
				 style="position: absolute;left:0;top:10rpx;font-size: 30rpx;" name="arrow-left"></u-icon>
				<u-input placeholder="KTV"
					style="position: absolute;left: 60rpx;"
					:custom-style="{
					'padding':'0 0 0 50rpx',
					'borderRadius':'20rpx',
					'backgroundColor':'#F2F2F2'}"></u-input>
				<u-icon name="search" style="color:#808080;position: absolute;left: 70rpx;top:15rpx;z-index: 999;"></u-icon>
			</view>
			<view style="font-size: 25rpx;position: fixed;top:130rpx;padding-left: 30rpx;">
				<view style="display: inline-block;margin-left: 20rpx;margin-right: 20rpx;padding: 10rpx 30rpx 10rpx 30rpx;border-radius: 40rpx;background-color: #F2F2F2;padding: 10rpx;">洗剪套餐</view>
				<view style="display: inline-block;background-color: #F2F2F2;padding: 10rpx 30rpx 10rpx 30rpx;border-radius: 40rpx;">烫染套餐</view>				
			</view>
			<view style="height: 160rpx;"></view>
			<view>
				<u-tabs 
				:inactive-color="'#000000'"
				:active-color="'#000000'"
				:bg-color="{'background':'rgba(0,0,0,0)'}"
				:bar-width="100"
				:bar-style="{
					'z-index':'-1',
					'font-size':'20rpx',
					'height':'15rpx',
					'bottom':'8rpx',
					'background': 'linear-gradient(90deg,rgba(255,0,0,.7), #FEBDBE)',}" 
					:list="list" :is-scroll="false" :current="current" @change="currentChange"></u-tabs>
				<view 
				style="background-color: #FFFFFF;">
					<view size="mini" 
						style="
							margin-left: 40rpx;
							margin-right: 20rpx;
							color: gray;
							font-size: 20rpx;
							display: inline-block;
							background-color: rgba(255,0,0,0);
							border:1rpx solid rgba(255,0,0,0)"><text style="margin-left: 30rpx;margin-right: 10rpx;">附近</text><u-icon style="font-size: 20rpx;" name="arrow-down-fill"></u-icon></view>
					<u-tag
					 tyoe="error"
					 text="智能排序" @click="isShaiXuan=true" size="mini" shape="circle" />
					 <view style="height: 20rpx;"></view>
					 <view style="border-top: 2rpx solid rgb(118,118,118,.5);"></view>
					 <view v-show="isShaiXuan" @click="isShaiXuan=false"  style="background-color: rgba(118,118,118,.4);z-index: 999;width: 100%;height: 100%;position: absolute;z-index:999"></view>
					 <view  v-show="isShaiXuan" style="position: absolute;width: 100%;font-size: 25rpx;z-index: 1000;background-color: #FFFFFF;padding-bottom: 20rpx;">
						 <view style="height: 30rpx;"></view>
						 <view style="padding: 15rpx 25rpx 10rpx 25rpx;">智能排序</view>
						 <view style="padding: 15rpx 25rpx 10rpx 25rpx;">人气优先</view>
						 <view style="padding: 15rpx 25rpx 10rpx 25rpx;">好评优先</view>
						 <view style="padding: 15rpx 25rpx 10rpx 25rpx;">低价优先</view>
						 <view style="padding: 15rpx 25rpx 10rpx 25rpx;">高价优先</view>
					 </view>
				</view>
			</view>
			<view>
				<view style="
					position: relative;border-bottom:2rpx solid rgba(118,118,118,.3);width: 700rpx;
					height: 200rpx;
					margin-left: 50%;
					transform: translateX(-50%);" v-for="item in 5">
					<image 
						style="position: absolute;top:20rpx;left: 40rpx;width: 150rpx;height: 150rpx;"
						src="../../static/test_001.png"
					></image>
					<view style="position: absolute;left: 220rpx;top:20rpx">
						<text style="font-weight: bold;font-size: 27rpx;">渔味无穷（京东大道店）</text>
						<view>
							<u-rate style="margin-right: 20rpx;" v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
							<text style="font-size: 30rpx;margin-right: 20rpx;color: rgba(255,0,0,.6);font-weight: bold;">2.1</text>
							<text style="font-size: 25rpx;color: gray;">1000条</text>
						</view>
						<view style="color: gray;font-size: 25rpx;">
							<text style="margin-right: 20rpx;">赣菜</text>
							<text>京东大道</text>
						</view>
						<view style="height: 10rpx;"></view>
						<view style="color: rgba(255,0,0,.6);font-size: 24rpx;">本店享消费券、积分活动</view>
					</view>
					<text style="color: gray;font-size: 20rpx;position: absolute;right: 30rpx;bottom:60rpx">395m</text>
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShaiXuan:false,
								list: [{
									name: '美容美发'
								}, {
									name: 'VIP商家'
								}, {
									name: '普通商家',
									count: 5
								}],
								current: 0,
								value: 2,
								colors: ['rgba(255,0,0,.5)', 'rgba(255,0,0,.7)', 'rgba(255,0,0,.9)'],
								icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
			}
		},
		methods: {
			currentChange(index){
				this.current=index;
				this.isShaiXuan=false;
			},
			toBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>

</style>
